<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <style>
        /* 虽然不是非常典型的需求，但有时我们确实需要让一个短句沿着圆形的
路径进行排列。当这个需求出现的时候，CSS 却无情地抛弃了我们。还没有
任何一个CSS 属性或特性可以达成这个效果，我们所能想到的CSS 解决方
案可能只是在脑海中闪过就会让我们起一身鸡皮疙瘩。那么，有没有一种不
依赖图片的方法既可以实现这种文字处理手法，又可以保全我们的神智和自
尊呢？ */
        /* 有一些脚本可以实现这个效果。这些脚本需要把每个字母包裹在独立的
<span> 元素之中，然后把各个字母分别旋转，从而构成一个环形。这种方
式不仅有很浓的hack 味道，而且还在没有正当理由的情况下给页面增加了
臃肿的脚本和冗余的DOM 元素。 */
        /* 尽管目前还没有更好的纯CSS 实现方法，但我们其实可以借助一点内
联SVG 来轻松解决这个难题。SVG 原生支持以任意路径排队的文字，而圆
形只不过是一种特定的路径而已。让我们开始动手吧 */
        /* 让文本按照路径排列的基本方法就是用一个<textPath>
元素来包裹住这段文本， 再把它们装进一个<text> 元素中。这个
<textPath> 元素还需要在它的ID 属性中引用一个<path> 元素，然后就可
以用这个<path> 元素来定义我们想要的路径②。在内联SVG 内部的文本同
样可以继承绝大多数字体样式（不包括line-height，因为它会由SVG 另
行指定），因此我们完全不需要担心字体问题，就像处理外部的SVG 图像时
一样。 */
        /* .circular {
            width: 30em;
            height: 30em;
            margin: 3em auto 0;
        }
        
        .circular svg {
            display: block;
            overflow: visible;
        }
        
        .circular path {
            fill: none;
        } */
        
        body {
            font: bold 120% Helvetica, sans-serif;
        }
        
        .circular {
            width: 30em;
            height: 30em;
            margin: 4em auto 0;
        }
        
        .circular svg {
            display: block;
            overflow: visible;
            transition: 10s linear transform;
        }
        
        .circular svg:hover {
            transform: rotate(-2turn);
        }
        
        .circular text {
            fill: currentColor
        }
        
        .circular path {
            fill: none;
        }
    </style>
    <div class="circular">
        <svg viewBox="0 0 100 100">
          <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle" />
          <text><textPath xlink:href="#circle">
              circular reasoning works because
              </textPath></text>
        </svg>
    </div>
    <script>
        // $$('.circular').forEach(function(el) {
        //     var NS = "http://www.w3.org/2000/svg";
        //     var xlinkNS = "http://www.w3.org/1999/xlink";
        //     var svg = document.createElementNS(NS, "svg");
        //     var circle = document.createElementNS(NS, "path");
        //     var text = document.createElementNS(NS, "text");
        //     var textPath = document.createElementNS(NS, "textPath");
        //     svg.setAttribute("viewBox", "0 0 100 100");
        //     circle.setAttribute("d", "M0,50 a50,50 0 1,1 0,1z");
        //     circle.setAttribute("id", "circle");
        //     textPath.textContent = el.textContent;
        //     textPath.setAttributeNS(xlinkNS, "xlink:href", "#circle");
        //     text.appendChild(textPath);
        //     svg.appendChild(circle);
        //     svg.appendChild(text);
        //     el.textContent = '';
        //     el.appendChild(svg);
        // });
    </script>
</body>

</html>